<template>
  <div class="userList">
    <div class="header">
      <el-row>
        <el-col :span="22">
          <el-breadcrumb separator="/">
            <el-breadcrumb-item separator-class="el-icon-arrow-right"
              >首页</el-breadcrumb-item
            >
            <el-breadcrumb-item>材料列表</el-breadcrumb-item>
          </el-breadcrumb>
        </el-col>
        <el-col :span="2">
          <el-button type="success" size="mini" @click="addUser"
            >新增</el-button
          >
        </el-col>
      </el-row>
    </div>
    <el-table
      height="69vh"
      :data="Materials"
      stripe
      :header-cell-style="{ 'text-align': 'center' }"
      :cell-style="{ 'text-align': 'center' }"
      style="width: 100%"
      fit
    >
      <el-table-column prop="materialCode" label="材料编码"> </el-table-column>
      <!--            <el-select v-model="value1" multiple placeholder="请选择">-->
      <!--                <el-option-->
      <!--                        v-for="item in options"-->
      <!--                        :key="item.value"-->
      <!--                        :label="item.label"-->
      <!--                        :value="item.value">-->
      <!--                </el-option>-->
      <!--            </el-select>-->
      <el-table-column prop="materialName" label="科目"> </el-table-column>
      <el-table-column prop="brand" label="品牌" show-overflow-tooltip />
      <el-table-column prop="specs" label="型号/规格" show-overflow-tooltip />
      <el-table-column prop="materialDefaultAmout" label="默认价格">
      </el-table-column>
      <el-table-column prop="unit" label="单位"> </el-table-column>
      <el-table-column width="200" label="操作">
        <template slot="header">
          <el-input
            @input="getSearch"
            v-model="search"
            size="mini"
            prefix-icon="el-icon-search"
            placeholder="请输入材料"
          />
        </template>
        <template slot-scope="scope">
          <el-button type="warning" size="mini" @click="upd(scope.row)"
            >修改</el-button
          >
          <el-button type="danger" size="mini" @click="del(scope.row)"
            >删除</el-button
          >
        </template>
      </el-table-column>
    </el-table>
    <el-dialog :title="title" :visible.sync="dialogFormVisible">
      <el-form :model="addUserFrom" :rules="rules" ref="from">
        <!-- <el-form-item label="材料编码列表" prop="flowcoding">
          <el-select placeholder="请选择材料编码" v-model="addUserFrom.coding">
            <el-option
              :label="item.classifyName"
              :key="item.classifyCode"
              :value="item.classifyCode"
              v-for="item in listMaterialClassify"
            >
            </el-option>
          </el-select>
        </el-form-item> -->
        <el-form-item label="科目" prop="name">
          <el-input
            v-model="addUserFrom.name"
            autocomplete="off"
            :disabled="disabled"
          ></el-input>
        </el-form-item>

        <el-form-item label="品牌">
          <el-input
            v-model="addUserFrom.brand"
            autocomplete="off"
            :disabled="disabled"
          ></el-input>
        </el-form-item>

        <el-form-item label="型号/规格">
          <el-input
            type="textarea"
            v-model="addUserFrom.specs"
            autocomplete="off"
            :disabled="disabled"
          ></el-input>
        </el-form-item>

        <el-form-item label="价格" prop="price">
          <el-input
            v-model="addUserFrom.price"
            autocomplete="off"
            :disabled="disabled"
          ></el-input>
        </el-form-item>

        <el-form-item label="单位" prop="unit">
          <el-input v-model="addUserFrom.unit" autocomplete="off"> </el-input>
        </el-form-item>
        <el-form-item label="供应商">
          <el-select v-model="addUserFrom.suppliers" multiple>
            <el-option
              v-for="item in allSuppliers"
              :key="item.supplierCode"
              :label="item.supplierName"
              :value="item.supplierCode"
            >
            </el-option>
          </el-select>
        </el-form-item>

        <el-form-item label="材料分类" prop="type">
          <el-select v-model="addUserFrom.type">
            <el-option
              v-for="item in materialTypeList"
              :key="item.code"
              :label="item.name"
              :value="item.code"
            >
            </el-option>
          </el-select>
        </el-form-item>

        <el-form-item label="材料图片：">
          <div class="uploadImage">
            <label
              class="back"
              v-loading.fullscreen.lock="loading"
              :element-loading-text="loadinginfo"
              element-loading-spinner="el-icon-loading"
              element-loading-background="rgba(0, 0, 0, 0.8)"
            >
              <div v-if="addUserFrom.img == ''">
                <div class="el-icon-folder-add"></div>
                上传材料
              </div>
              <input
                class="login-input"
                type="file"
                accept="image/*"
                ref="file"
                @change="uploadImage($event)"
                style="display: none"
              />
              <img :src="addUserFrom.img" alt="" v-if="addUserFrom.img != ''" />
            </label>
          </div>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="cancel">取 消</el-button>
        <el-button type="primary" @click="confirm">确 定</el-button>
      </div>
    </el-dialog>
    <el-pagination
      :page-size="10"
      :pager-count="11"
      layout="prev, pager, next"
      @current-change="pageLoading"
      :total="total"
    >
    </el-pagination>
  </div>
</template>

<script>
import { listMaterial } from "../../network/business";
import {
  addMaterial,
  updMaterial,
  materialTypeList,
} from "../../network/business";
import { delMaterial } from "../../network/business";
// import { listMaterialClassify } from "../../network/business";
import { getSupplier } from "../../network/supplier";
import { upload } from "../../network/job";

export default {
  name: "index",
  data() {
    return {
      search: "",
      dialogFormVisible: false,
      disabled: false,
      title: "新增材料",
      rules: {
        name: [{ required: true, message: "请输入材料名称", trigger: "blur" }],
        coding: [
          { required: true, message: "请输入材料编码", trigger: "blur" },
        ],
        price: [{ required: true, message: "请输入价格", trigger: "blur" }],
        unit: [{ required: true, message: "请输入单位", trigger: "change" }],
        img: [{ required: true, message: "请输入单位", trigger: "change" }],
        type: [{ required: true, message: "请选择材料分类", trigger: "change" }],
        suppliers: [
          { required: true, message: "请输入供应商列表", trigger: "change" },
        ],
      },

      addUserFrom: {
        name: "",
        coding: "",
        price: "",
        unit: "",
        update: false,
        img: "",
        suppliers: [],
        brand: "",
        specs: "",
        type: "",
      },
      loading: false,
      loadinginfo: "",
      // listMaterialClassify: "",
      defalueaddUserFrom: {
        name: "",
        coding: "",
        price: "",
        unit: "",
        img: "",
        update: false,
        suppliers: [],
        brand: "",
        specs: "",
        type: "",
      },
      allSuppliers: [],
      total: 1,
      Materials: [],
      materialTypeList: [],
      data: {
        pageNum: 1,
        pageSize: 10,
      },
    };
  },
  created() {
    this.getListMaterials();
    this.getMaterTypeList();
    // this.getlistMaterialClassify();
    getSupplier({ pageSize: 1000 }).then((v) => {
      if (v.code == 200) {
        this.allSuppliers = v.data.content;
      } else {
        this.$message.error(v.msg);
      }
    });
  },
  methods: {
    async getMaterTypeList() {
      let res = await materialTypeList();
      if (res.code == 200) {
        this.materialTypeList = res.data.content;
      }
    },
    file(e) {
      this.loading = true;
      this.loadinginfo = "正在上传图片,请稍等....";
      let file = new FormData();
      file.append("img", e);
      this.$refs.file.setAttribute("type", "text");
      upload(file).then((v) => {
        if (v.code == 200) {
          let { data } = v;
          this.loadinginfo = "上传完成....";

          this.addUserFrom.img = data;
        } else {
          this.$message.error("上传图片失败");
        }
        //解决上传同一张图片，无法重复上传
        this.$refs.file.setAttribute("type", "file");
        setTimeout(() => {
          this.loading = false;
        }, 200);
      });
    },
    getSearch() {
      this.data.pageNum = 1;
      this.data.searchVal = this.search;
      this.getListMaterials();
    },
    pageLoading(e) {
      this.data.pageNum = e;
      this.getListMaterials();
    },
    async getListMaterials() {
      let status = await listMaterial(this.data);
      if (status.code == 200) {
        this.Materials = status.data.content;
        this.total = status.data.totalSize;
      } else {
        this.$error(status.msg);
      }
    },
    // async getlistMaterialClassify() {
    //   let status = await listMaterialClassify(this.data);
    //   if (status.code == 200) {
    //     this.listMaterialClassify = status.data.content;

    //     this.totalSize = status.data.totalSize;
    //   } else {
    //     this.$error(status.msg);
    //   }
    // },
    uploadImage(e) {
      let file = e.target.files[0];
      this.file(file);
    },
    upd(row) {
      this.addUserFrom.name = row.materialName;
      this.addUserFrom.materialCode = row.materialCode;
      this.addUserFrom.coding = row.classifyCode;
      this.addUserFrom.price = row.materialDefaultAmout;
      this.addUserFrom.unit = row.unit;
      this.addUserFrom.img = row.img;
      this.addUserFrom.suppliers = row.supplier;
      this.addUserFrom.brand = row.brand;
      this.addUserFrom.specs = row.specs;
      this.addUserFrom.type = row.type;
      this.addUserFrom.update = true;
      this.dialogFormVisible = true;
      this.title = "修改材料";
    },
    del(row) {
      this.$confirm("此操作将永久删除该材料, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(async () => {
          let data = {
            materialCode: row.materialCode,
          };
          let status = await delMaterial(data);
          if (status.code == 200) {
            this.$success("删除该材料成功！");
            this.getListMaterials();
          } else {
            this.$error(status.msg);
          }
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },
    addUser() {
      this.dialogFormVisible = true;

      this.title = "新增材料";
    },
    cancel() {
      this.dialogFormVisible = false;
    },
    confirm() {
      let data = {
        classifyCode: this.addUserFrom.coding,
        materialCode: this.addUserFrom.materialCode,
        materialName: this.addUserFrom.name,
        unit: this.addUserFrom.unit,
        price: this.addUserFrom.price,
        img: this.addUserFrom.img,
        suppliers: this.addUserFrom.suppliers,
        brand: this.addUserFrom.brand,
        specs: this.addUserFrom.specs,
        type: this.addUserFrom.type,
      };
      this.$refs.from.validate(async (v) => {
        if (!v) return;
        if (!this.addUserFrom.update) {
          let status = await addMaterial(data);
          if (status.code == 200) {
            this.$success("添加材料完成");
            this.getListMaterials();
          } else {
            this.$error(status.msg);
          }
        } else {
          updMaterial(data).then((v) => {
            if (v.code == 200) {
              this.$message.success("修改成功！");
              this.getListMaterials();
            } else {
              this.$message.error(v.msg);
            }
          });
        }
        this.dialogFormVisible = false;
      });
    },
  },
  watch: {
    dialogFormVisible: function (v) {
      if (!v) {
        this.addUserFrom = Object.assign({}, this.defalueaddUserFrom);
      }
    },
  },
};
</script>

<style scoped lang="scss">
.header {
  margin-bottom: 20px;
}
.el-select {
  width: 100%;
}
::v-deep .el-dialog {
  width: 30%;
  border-radius: 5px;
}
.back {
  border-radius: 20px;
  display: inline-block;
  height: 200px;
  display: flex;
  &:hover {
    cursor: pointer;
  }
  img {
    width: 100%;
    height: 100%;
  }

  align-items: center;
  text-align: center;
  justify-content: center;
  width: 200px;
  background-color: #f3f3f3;
  .el-icon-folder-add {
    font-size: 40px;
  }
}
.uploadImage {
  display: flex;
  justify-content: space-between;
}
</style>